<template>
  <div class="update-image" :style="{'background-image': `url(${modelValue})`}">
    <span class="update" @click="openChooseImg">
      <el-icon v-if="modelValue!=null">
        <edit/>
      </el-icon>
      <el-icon v-else>
        <plus/>
      </el-icon>
   上传头像
    </span>
    <el-dialog v-model="drawer" width="30%" :title="'头像上传'" draggable :append-to-body="true">
      <div style="text-align: center">
        <el-upload class="avatar-uploader"
                   :auto-upload="false"
                   action=""
                   ref="uploadRef"
                   :file-list="fileList"
                   accept="jpg,png,JPG"
                   :http-request="uploadImage"
                   :on-change="beforeAvatarUpload"
                   :show-file-list="false" :limit="1">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" alt=""/>
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </div>

      <template #footer>
        <div class="dialog-footer" style="text-align: center">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="submitUpload">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>

import {onMounted, ref} from 'vue'
import {ElMessage} from "element-plus";
import {avatarUpload} from "@/api/employees";
import {Edit, Plus} from "@element-plus/icons-vue";


const props = defineProps({
  modelValue: {
    type: [String, Array],
    default: ''
  },
  multiple: {
    type: Boolean,
    default: false
  }
})

const multipleValue = ref([])
onMounted(() => {
  if (props.multiple) {
    multipleValue.value = props.modelValue
  }
})

const drawer = ref(false)

const openChooseImg = async () => {
  drawer.value = true
}

const fileList = ref([])
const uploadRef = ref()
const imageUrl = ref('')

const uploadImage = async (params) => {
  let formData = new FormData()
  formData.append('file', params.file)
  const res = await avatarUpload(formData)
  if (res.code === 0) {
    ElMessage.success(res.msg)
    fileList.value = []
  }
}
const close = () => {
  drawer.value = false
  fileList.value = []
  imageUrl.value = ''
}

const submitUpload = () => {
  uploadRef.value.submit()
  drawer.value = false
  window.location.reload()
}
const beforeAvatarUpload = (file) => {
  const isJPG = file.type === 'image/jpeg' || 'image/jpg' || 'image/JPG';
  const isPNG = file.type === 'image/png';
  const isLtM = file.size / 1024 / 1024 < 20
  if (!isJPG && !isPNG) {
    ElMessage.error('上传头像图片只能是 JPG 格式!')
    fileList.value = []
  }
  if (!isLtM) {
    ElMessage.error('上传头像图片大小不能超过 10MB!')
    fileList.value = []
  }
  if (isJPG && isLtM) {
    imageUrl.value = URL.createObjectURL(file.raw)
    // URL.createObjectURL(file.raw);
    // uploadRef.value.$forceUpdate()
  }
  return isJPG && isLtM
}
</script>

<style scoped lang="scss">

.multiple-img {
  display: flex;
  gap: 8px;
}

.add-image {
  width: 120px;
  height: 120px;
  line-height: 120px;
  display: flex;
  justify-content: center;
  border-radius: 20px;
  border: 1px dashed #ccc;
  background-size: cover;
  cursor: pointer;
}

.update-image {
  cursor: pointer;
  width: 120px;
  height: 120px;
  line-height: 120px;
  display: flex;
  justify-content: center;
  border-radius: 20px;
  border: 1px dashed #ccc;
  background-repeat: no-repeat;
  background-size: cover;

  &:hover {
    color: #fff;
    background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(0, 0, 0, 0.15) 100%
    ),
    radial-gradient(
            at top center,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(0, 0, 0, 0.4) 120%
    ) #989898;
    background-blend-mode: multiply, multiply;
    background-size: cover;

    .update {
      color: #fff;
    }
  }

  .update {
    height: 120px;
    width: 120px;
    text-align: center;
    color: transparent;
  }
}

.upload-btn-media-library {
  margin-left: 20px;
}

.media {
  display: flex;
  flex-wrap: wrap;

  .media-box {
    width: 120px;
    margin-left: 20px;

    .img-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 36px;
      text-align: center;
      cursor: pointer;
    }

    .header-img-box-list {
      width: 120px;
      height: 120px;
      border: 1px dashed #ccc;
      border-radius: 8px;
      text-align: center;
      line-height: 120px;
      cursor: pointer;
      overflow: hidden;

      .el-image__inner {
        max-width: 120px;
        max-height: 120px;
        vertical-align: middle;
        width: unset;
        height: unset;
      }
    }
  }
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
